<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通义灵码帮你调个甜品</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @keyframes marquee1 {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
        
        @keyframes marquee2 {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        
        @keyframes progress {
            0% { width: 0%; }
            100% { width: 100%; }
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .animate-marquee1 {
            animation: marquee1 20s linear infinite;
        }
        
        .animate-marquee2 {
            animation: marquee2 20s linear infinite;
        }
        
        .animate-progress {
            animation: progress 15s linear;
        }
        
        .animate-float {
            animation: float 3s ease-in-out infinite;
        }
        
        .animate-pulse-slow {
            animation: pulse 2s ease-in-out infinite;
        }
        
        #result-card {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.5s ease-out;
        }
        
        #result-card.translate-y-0 {
            opacity: 1;
            transform: translateY(0);
        }
        
        .hover\:float:hover {
            animation: float 3s ease-in-out infinite;
        }
        
        .ingredient-item {
            transition: all 0.2s ease;
        }
        
        .ingredient-item:hover {
            transform: translateX(5px);
            color: #ec4899;
        }
    </style>
    
    <style>
        @media (max-width: 640px) {
            .container {
                padding: 1rem;
            }
            
            h1 {
                font-size: 1.875rem;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-pink-50 to-purple-50 min-h-screen">
    <div id="app" class="container mx-auto px-4 py-8 max-w-md">
        <!-- 欢迎与点甜品页 -->
        <div id="welcome-page" class="page">
            <h1 class="text-4xl font-bold text-center text-pink-600 mb-8 animate-pulse-slow">通义灵码帮你调个甜品</h1>
            
            <!-- 流动的灵感词汇 -->
            <div class="mb-8 overflow-hidden">
                <div class="flex whitespace-nowrap animate-marquee1">
                    <span class="mx-4 text-pink-500 text-lg">夏日特饮</span>
                    <span class="mx-4 text-purple-500 text-lg">浓郁巧克力</span>
                    <span class="mx-4 text-blue-500 text-lg">清新果味</span>
                    <span class="mx-4 text-green-500 text-lg">健康低卡</span>
                    <span class="mx-4 text-yellow-500 text-lg">节日限定</span>
                    <span class="mx-4 text-pink-500 text-lg">午后小憩</span>
                    <span class="mx-4 text-purple-500 text-lg">浪漫玫瑰</span>
                    <span class="mx-4 text-blue-500 text-lg">冬季暖饮</span>
                    <span class="mx-4 text-green-500 text-lg">经典口味</span>
                    <span class="mx-4 text-yellow-500 text-lg">创意新品</span>
                </div>
            </div>
            
            <!-- 饮食限制复选框 -->
            <div class="mb-6">
                <h3 class="text-lg font-semibold text-gray-700 mb-2">饮食限制</h3>
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                    <label class="flex items-center space-x-2 bg-white p-3 rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer">
                        <input type="checkbox" class="dietary-restriction rounded text-pink-600" value="无坚果">
                        <span class="text-sm">无坚果</span>
                    </label>
                    <label class="flex items-center space-x-2 bg-white p-3 rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer">
                        <input type="checkbox" class="dietary-restriction rounded text-pink-600" value="低脂">
                        <span class="text-sm">低脂</span>
                    </label>
                    <label class="flex items-center space-x-2 bg-white p-3 rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer">
                        <input type="checkbox" class="dietary-restriction rounded text-pink-600" value="素食">
                        <span class="text-sm">素食</span>
                    </label>
                    <label class="flex items-center space-x-2 bg-white p-3 rounded-lg shadow-sm hover:shadow-md transition-shadow cursor-pointer">
                        <input type="checkbox" class="dietary-restriction rounded text-pink-600" value="无麸质">
                        <span class="text-sm">无麸质</span>
                    </label>
                </div>
            </div>

            <!-- 语音识别结果文本输入框 -->
            <div class="mb-6">
                <textarea id="user-input" 
                         class="w-full h-32 p-4 border border-pink-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent shadow-sm transition-all" 
                         placeholder="描述你想要的甜品，例如：我想要一个适合夏天的、低糖的芒果慕斯...&#10;&#10;或者点击下方麦克风按钮语音输入"></textarea>
            </div>
            
            <!-- 语音输入按钮和提交按钮 -->
            <div class="flex justify-between items-center mb-6">
                <button id="voice-btn" class="w-14 h-14 rounded-full bg-pink-500 flex items-center justify-center text-white shadow-lg hover:bg-pink-600 transition-all hover:scale-110">
                    <i class="fas fa-microphone text-xl"></i>
                </button>
                
                <button id="submit-btn" class="px-6 py-3 bg-pink-500 text-white rounded-lg font-semibold shadow-lg hover:bg-pink-600 transition-all transform hover:scale-105 hidden">
                    去调制
                </button>
            </div>
        </div>
        
        <!-- Loading 等待页 -->
        <div id="loading-page" class="page hidden">
            <div class="bg-white rounded-2xl p-8 shadow-xl max-w-md mx-auto">
                <div class="text-center">
                    <div class="mb-6">
                        <div class="text-6xl animate-bounce animate-float">🍰</div>
                    </div>
                    <div class="h-2 bg-pink-200 rounded-full mb-4">
                        <div class="h-full bg-pink-500 rounded-full animate-progress"></div>
                    </div>
                    <p id="loading-text" class="text-pink-600 font-medium mt-6">通义灵码 AI 甜品师正为你精心构思</p>
                </div>
            </div>
        </div>
        
        <!-- 结果呈现页 -->
        <div id="result-page" class="page hidden">
            <div id="result-card" class="bg-white rounded-2xl shadow-xl overflow-hidden">
                <div class="p-6">
                    <h2 id="dessert-name" class="text-2xl font-bold text-pink-600 mb-4 text-center">夏日芒果椰香慕斯</h2>
                    <p id="dessert-story" class="text-gray-700 mb-6 leading-relaxed italic">
                        这款慕斯的灵感来源于热带海滩的悠闲时光。芒果的浓郁甜香象征着夏日阳光，椰奶的清香如同海风轻拂。
                        每一口都仿佛在品尝夏日的甜蜜回忆，让人忘却烦恼，沉浸在美好的假期氛围中。
                    </p>
                    <div class="border-t border-b border-pink-100 py-4 mb-6">
                        <h3 class="font-semibold text-pink-500 mb-2">食材清单</h3>
                        <ul id="ingredients-list" class="list-disc list-inside text-gray-600 space-y-1">
                            <li class="ingredient-item">芒果 2个（约300g果肉）</li>
                            <li class="ingredient-item">椰浆 100ml</li>
                            <li class="ingredient-item">淡奶油 200ml</li>
                            <li class="ingredient-item">吉利丁片 10g</li>
                            <li class="ingredient-item">细砂糖 30g</li>
                        </ul>
                    </div>
                    <div class="mb-6">
                        <h3 class="font-semibold text-pink-500 mb-2">制作要点</h3>
                        <p id="instructions" class="text-gray-600">
                            1. 吉利丁片冷水泡软备用<br>
                            2. 芒果打成泥，加热至微沸后加入泡软的吉利丁片<br>
                            3. 椰浆和淡奶油混合打发至六分发<br>
                            4. 将芒果泥与打发的椰浆奶油混合均匀<br>
                            5. 倒入模具冷藏4小时以上至凝固
                        </p>
                    </div>
                </div>
                <div class="px-6 py-4 bg-pink-50 flex justify-between">
                    <button id="remix-btn" class="px-4 py-2 bg-white text-pink-500 border border-pink-300 rounded-lg font-medium hover:bg-pink-100 transition-all flex items-center">
                        <i class="fas fa-redo mr-2"></i> 再调制一次
                    </button>
                    <button id="save-btn" class="px-4 py-2 bg-pink-500 text-white rounded-lg font-medium hover:bg-pink-600 transition-all flex items-center">
                        <i class="far fa-bookmark mr-2"></i> 保存配方
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>